<template>
	<view class="page">
		<view class="wrap">
			<view id="demo" :style="{'height':dispositionObj?.isSign ? '90%' : '100%'}"></view>

		</view>
	</view>
</template>

<script setup>
	import Pdfh5 from "pdfh5";
	import "pdfh5/css/pdfh5.css";
	import {ref, watch, nextTick} from 'vue'
	const props = defineProps({
		pdfLink:{
			type:String,
			required:true
		}
	})
	// 配置
	const dispositionObj = ref({
		id:'',
		pdfUrl:'',//默认加载的pdf
		isSign:false,//是否需要签名按钮
		env:'',//打开标注的平台
		inside:false,
	})
	let _unexpectedProperties = [], _logArr = [];
	for (let key in Array.prototype) {
	    if (!Array.prototype.hasOwnProperty(key)) continue;
	    // 存放直接属性
	    _unexpectedProperties.push(key);
	};
	// 存放原始键 原始方法
	_logArr = _unexpectedProperties.map(v => ({ [v]: Array.prototype[v] }));
	// 删除直接属性
	_unexpectedProperties.forEach(v => delete Array.prototype[v]);
	
	const pdfh5DOM = ref()
	const initpdf = (pdfurl)=> {
		try{
		pdfh5DOM.value = new Pdfh5('#demo', {
			cMapUrl:'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/',
			pdfurl, // pdf 地址，请求的地址需要为线上的地址，测试的本地的地址是不可以的
			// lazy: true, // 是否懒加载
			withCredentials: true,
			// renderType: "svg",
			maxZoom: 3, //手势缩放最大倍数 默认3
			scrollEnable: true, //是否允许pdf滚动
			zoomEnable: true, //是否允许pdf手势缩放
		});
		pdfh5DOM.value.on("ready", function() {
			console.log("pdf准备开始渲染，总页数：" + this.totalNum)
		})
		//监听完成事件
		pdfh5DOM.value.on("complete", function(status, msg, time) {
			console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum);
			 Object.assign(Array.prototype, ..._logArr);
		});
		
		}catch(e){
			//TODO handle the exception
		}
	}
	watch(()=>props.pdfLink,(val)=>{
		nextTick(()=>{
			initpdf(val)
		})
	},{
		immediate:true,
		deep:true
	})


</script>

<style scoped lang="scss">
.page{
	width: 100%;
	height: 100%;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	.wrap{
		width: 100%;
		flex: 1;
	}
	.pdf-btn {
		width: 100%;
		border-top: 2rpx solid #F8F9FC;
		height: 8%;
		display: flex;
		flex-direction: row;
	
		.pdf-btn-sign,
		.pdf-btn-done {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		.pdf-btn-sign {
			background: #ffffff;
	
			.btn {
				color: #3D3D3D;
				font-size: 32rpx;
			}
		}
	
		.pdf-btn-done {
			background: #4E70F6;
	
			.btn {
				color: #ffffff;
				font-size: 32rpx;
			}
		}
	}
}
.SignaturePicture-box{
	--size:200rpx;
	position: fixed;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background-color: #FFFFFF; 
	box-shadow: 8rpx 8rpx 26rpx rgba(0, 0, 0, 0.2);
	border-radius: 20rpx; 
	width: var(--size);
	height: var(--size);
	overflow: hidden;
}
:deep(.viewerContainer){
	background: #ededf0;
}
</style>